<template>
	<view class="content">
		<my-header :title="parentTitle" @instruct="handinstruct" />
		<scroll-view :scroll-y="true" class="ScrollView">
			<up-radio-group v-model="radiovalue1" placement="column">
				<view class="addritem" v-for="(item,index) in addrLists" :key="index">
					<up-radio :name="item.userState" :customStyle="{ marginBottom: '8px' }"
						@change="radioChange(item)"></up-radio>
					<view class="textBox">
						<p class="p1">{{ item.userAddr }}</p>
						<p class="p2">{{item.detailedAddress}}</p>
						<p class="p2">{{ item.userName }}&nbsp;&nbsp;&nbsp;{{ item.userPhone }}</p>
					</view>
					<image :src="proxy.serverimageUrl + 'AddressManagement/edit.png'" @click="editAddr(item)"></image>
				</view>
			</up-radio-group>
		</scroll-view>
		<view class="btnBox">
			<up-button color="#013CAA" text="新增收货地址" @click="getNewAddress()"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		addrList,
		updateDefaultAddr,
		delAddr
	} from '../../utils/api.js';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	 const { proxy,ctx } = getCurrentInstance()
	const parentTitle = ref('收货地址');
	const radiovalue1 = ref('');
	const addrLists = ref([]);
	const type = ref('')
	onLoad((o) => {
		console.log(o);
		if(uni.getStorageSync('orderbuy') || uni.getStorageSync('ids')) type.value = 1
		getAddrList();
	});

	// 点击按钮修改默认地址
	const radioChange = (item) => {
		let params = {
			aid: item.aid,
			userState: item.userState
		}
		updateDefaultAddr(params).then((res) => {
			if (res.code === 200) {
				console.log('修改成功')
				getAddrList()
			}
		})
	};

	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		if (type.value == 1) {
			switch (instruct) {
				// 返回
				case 'back':
					uni.redirectTo({
						url:'/subpages/Ordersettlement/index'
					})
					break;
			}
		} else {
			switch (instruct) {
				// 返回
				case 'back':
					uni.switchTab({
						url: '/pages/Mypage/index'
					})
					break;
			}
		}

	}
	// 获取收货地址
	const getAddrList = () => {
		let params = {
			openId: uni.getStorageSync('openid')
		};
		addrList(params).then((res) => {
			if (res.code === 200) {
				addrLists.value = res.data;
				radiovalue1.value = res.data[0].userState
			}
		});
	};

	//修改收货地址
	const editAddr = (item) => {
		uni.redirectTo({
			url: '/subpages/AddressManagement/newaddress?aid=' + item.aid
		})
	}

	// 点击"新增"跳转页面
	const getNewAddress = () => {
		uni.redirectTo({
			url: '/subpages/AddressManagement/newaddress'
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #f2f2f2;

		.ScrollView {
			box-sizing: border-box;
			padding: 30rpx;
			height: calc(100vh - 300rpx);

			.addritem {
				margin-bottom: 30rpx;
				width: 100%;
				background: #ffffff;
				border-radius: 20rpx;
				border: 2rpx solid #eaeaea;
				display: flex;
				align-items: center;
				padding: 52rpx 34rpx;
				justify-content: space-between;

				.textBox {
					.p1 {
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 34rpx;
						color: #303030;
						line-height: 34rpx;
					}

					.p2 {
						margin-top: 20rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #636363;
						line-height: 28rpx;
					}
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.btnBox {
			width: 100%;
			bottom: 50rpx;
			position: fixed;
			padding: 0 30rpx;
		}
	}
</style>